<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div style="height: 4px;position: absolute;z-index: 2222; width: 100%; top: 46px;background: #f0f0f0"></div>
    <div style="height: 50px;"></div>
    <div class="about-us" v-show="show">
      <div class="content-box" v-show="cardsta">
        <div class="card-tu">
          <img :src="list.co_image" class="card">
          <div class="sta_user" v-if="list.uc_status == '已使用'">
            <img src="../assets/image/wdkq_ysy.png" alt="">
          </div>
          <div class="card_ti" :class="{ 'gray' : list.uc_status == '已使用' }" @click="experience">
            立即体验
          </div>
        </div>
        <div class="Instructions">
          <p > 使用说明：</p>
          <p v-html="list.co_explain"></p>
        </div>
      </div>
      <div v-show="nocard" class="no_card">
        暂无卡券
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'addJoin',
    data () {
      return {
        list: {},
        cardsta: false,
        nocard: false,
        show: false,
        classify_list: []
      }
    },
    methods: {
      experience: function () {
        var thisObj = this
        if (thisObj.list.uc_status !== '已使用') {
          window.location.href = '#/ServiceHome'
        }
      },
      verify: function () {
        var thisObj = this
        this.$chaos.setTitle('我的卡券')
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '我的卡券')
        this.$store.commit('footerShow', false)
        this.$chaos.verify(function () {
          thisObj.$chaos.ajax({
            slient: true,
            userinfo: true,
            url: 'User/getUserCoupon',
            callback: function (type, res) {
              if (res.status === 'SUCCESS') {
                thisObj.show = true
                if (res.result.list == null) {
                  thisObj.nocard = true
                  return false
                } else {
                  thisObj.cardsta = true
                }
                thisObj.list = res.result.list
              } else {
                thisObj.show = true
                thisObj.$vux.toast.show({
                  text: res.result.msg,
                  type: 'text',
                  width: '180px',
                  position: 'bottom'
                })
              }
            }
          })
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  .gray{
    background: rgb(196,196,196)!important;
  }
  [v-cloak] {
    display: block;
  }
  body,
  html {
    background: #f9f9f9;
  }
  .content-box {
    padding: 0px 15px;
  }
  .card-tu {
    position: relative;
  }
  .card {
    width: 100%;
    height: 100%;
  }
  .card-tu {
    padding: 12px 0px;
    height: 210px;
  }
  .sta_user {
    position: absolute;
    width: 70px;
    height: 70px;
    z-index: 333;
    bottom: 56%;
    right: 30px;
  }
  .sta_user img {
    width: 100%;
    height: 100%;
  }
  .card_ti {
    position: absolute;
    background: rgb(255,160,40);
    z-index: 33;
    bottom: 14%;
    width: 90px;
    left: 50%;
    margin-left: -45px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    color: #fff;
  }
  .Instructions p {
    line-height: 25px;
  }
  .no_card {
    text-align: center;
    color: #999;
    margin-top: 30px;
  }
</style>
